<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >

<title>Vue.js入门 | 迷航</title>
<meta name="description" content="人可以迷失方向，但是不能停下脚步！">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="shortcut icon" href="https://tingke.gitee.io/post/favicon.ico?v=1690805106645">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">
<link rel="stylesheet" href="https://tingke.gitee.io/post/styles/main.css">



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />



  </head>
  <body>
    <div id="app" class="main">

      <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://tingke.gitee.io/post">
        <img src="https://tingke.gitee.io/post/images/avatar.png?v=1690805106645" class="site-logo">
        <h1 class="site-title">迷航</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="/" class="site-nav">
            首页
          </a>
        
      
        
          <a href="/archives" class="site-nav">
            归档
          </a>
        
      
        
          <a href="/tags" class="site-nav">
            标签
          </a>
        
      
        
          <a href="/post/about" class="site-nav">
            关于
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="social-container">
      
        
      
        
      
        
      
        
      
        
      
    </div>
    <div class="site-description">
      人可以迷失方向，但是不能停下脚步！
    </div>
    <div class="site-footer">
      Powered by <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a> Copyright © 2019 | <a class="rss" href="https://tingke.gitee.io/post/atom.xml" target="_blank">RSS</a>
    </div>
  </div>
</div>


      <div class="main-container">
        <div class="content-container" data-aos="fade-up">
          <div class="post-detail">
            <h2 class="post-title">Vue.js入门</h2>
            <div class="post-date">2018-03-23</div>
            
            <div class="post-content">
              <h2 id="vuejs是什么">Vue.js是什么</h2>
<blockquote>
<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的<font color='red'><strong>渐进式框架</strong></font>。与其它大型框架不同的是，Vue 被设计为可以<font color='red'><strong>自底向上逐层应用</strong></font>。Vue 的核心库只关注<font color='red'><strong>视图层</strong></font>，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
</blockquote>
<!-- more --> 
<p>官方网站：<a href="https://cn.vuejs.org/">https://cn.vuejs.org/</a></p>
<h2 id="安装">安装</h2>
<ol>
<li>
<p><strong>引入Vue.js环境</strong></p>
<p>你可以创建一个 <code>.html</code> 文件，然后通过如下方式引入 <strong>Vue</strong>：</p>
<pre><code class="language-html">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue&quot;&gt;&lt;/script&gt;
</code></pre>
</li>
<li>
<p><strong>NPM</strong><br>
在用 <strong>Vue</strong> 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。</p>
<pre><code class="language-sh">$ npm install vue
</code></pre>
</li>
<li>
<p><strong>命令行工具（CLI）</strong><br>
Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：</p>
<pre><code class="language-sh"># 全局安装 vue-clir
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm run dev

</code></pre>
<blockquote>
<p>[warning]<br>
CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。</p>
</blockquote>
</li>
</ol>
<h2 id="vue实例">Vue实例</h2>
<p>每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：</p>
<pre><code class="language-js">var vm = new Vue({
  // 选项
})
</code></pre>
<h3 id="常用选项">常用选项</h3>
<p><code>el</code>:提供一个在页面上已存在的 <code>DOM</code> 元素作为 <code>Vue</code> 实例的挂载目标。可以是 <code>CSS</code> 选择器，也可以是一个 <code>HTMLElement</code> 实例。</p>
<p><code>data</code>: Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。</p>
<pre><code class="language-html">&lt;body&gt;
    &lt;h1&gt;vue-component组件&lt;/h1&gt;
    &lt;hr&gt;
    &lt;div id=&quot;app&quot;&gt;
        {{ msg }}&lt;br&gt;
        &lt;a href=&quot;#&quot;&gt;我是tingke&lt;/a&gt;'
    &lt;/div&gt;
    &lt;div id=&quot;app1&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;我是{{msg}}&lt;/a&gt;'
    &lt;/div&gt;

    &lt;script&gt;
        var app = new Vue({
            el: '#app',
            data: {
                msg: '123'
            },
        });
        var app1 = new Vue({
            el: '#app1',
            data:{
                msg: '321'
            }
        });
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p><code>methods</code>: 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。</p>
<p><code>computed</code>:计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。</p>
<pre><code class="language-js">var app =new Vue({
    el: '#app',
    data: {
        cash: 100,
        newsList:[
            {title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'},
            {title:'日本第二大准航母服役 外媒：针对中国潜艇',date:'2017/3/12'},
            {title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'},
            {title:'起底“最短命副市长”：不到40天落马，全家被查',date:'2017/3/23'},
        ]
    },
    computed: {
        money: function () {
            return  '￥' + this.cash + '元';
        },
        list: function () {
            var arr = this.newsList.slice();
            return arr.reverse();
        }
    }
})
</code></pre>
<p><code>watch</code>:一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 <code>$watch()</code>，遍历 <code>watch</code> 对象的每一个属性。</p>
<pre><code class="language-js">var suggestion=['T恤短袖','夹克长裙','棉衣羽绒服'];
var app =new Vue({
    el: '#app',
    data:{
        temperature:14,
        suggestion:'夹克长裙'
    },
    methods:{
        add:function(){
            this.temperature+=5;
        },
        reduce:function(){
            this.temperature-=5;
        }
    },
    watch:{
        // 监听温度，【注意】不应该使用箭头函数来定义 watcher 函数
        temperature:function(newVal,oldVal){
            if(newVal&gt;=26) {
                this.suggestion=suggestion[0];
            }else if(newVal&lt;26 &amp;&amp; newVal &gt;=0) {
                this.suggestion=suggestion[1];
            }else {
                this.suggestion=suggestion[2];
            }
        }
    }
});
</code></pre>
<h3 id="实例生命周期钩子">实例生命周期钩子</h3>
<p><code>beforeCreate</code>:在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。</p>
<p><code>creaated</code>:在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，<code>$el</code> 属性目前不可见。</p>
<p><code>beforeMount</code>:在挂载开始之前被调用：相关的 <code>render</code> 函数首次被调用。<br>
<code>mounted</code>:<code>el</code> 被新创建的 <code>vm.$el</code> 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 <code>mounted</code> 被调用时 <code>vm.$el</code> 也在文档内。</p>
<p><code>beforeUpdate</code>: 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。</p>
<p><code>updated</code>:由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子</p>
<p><code>beforeDestroy</code>:实例销毁之前调用。在这一步，实例仍然完全可用</p>
<p><code>destroyed</code>:Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。</p>
<figure data-type="image" tabindex="1"><img src="https://cn.vuejs.org/images/lifecycle.png" alt="" loading="lazy"></figure>
<h2 id="指令">指令</h2>
<h3 id="基本介绍">基本介绍</h3>
<ol>
<li>
<p><strong>v-text</strong>：主要用于文本的渲染。和 <code>{{ Mustache }}</code> 功能一样。但是 <code>{{ Mustache }}</code> 在第一次页面Vue木有初始化完成会显示 <code>{{ Mustache }}</code> 字符。故文本渲染多用v-text。</p>
<pre><code class="language-html">&lt;span v-text=&quot;msg&quot;&gt;&lt;/span&gt;
&lt;!-- 和下面的一样 --&gt;
&lt;span&gt;{{msg}}&lt;/span&gt;
</code></pre>
<blockquote>
<p>[info] 如果遇到更新部分的 <code>textContent</code> ，需要使用 <code>{{ Mustache }}</code> 插值。</p>
</blockquote>
</li>
<li>
<p><strong>v-html</strong>：更新元素的 <code>innerHTML</code> 。注意：内容按普通 <code>HTML</code> 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。</p>
</li>
<li>
<p><strong>v-model</strong>:主要是在表单里面使用。比如文本框、下拉框、单选、复选、textarea。v-model是一个双向的功能。文本框输入以后，模型也会发生改变。反之模型改变了文本框也会改变。</p>
</li>
<li>
<p><strong>v-show</strong>：控制显示隐藏。dom是存在的。仅仅加 display block, display none。</p>
<blockquote>
<p>[warning] 注意，v-show 不支持 <code>&lt;template&gt;</code> 元素，也不支持 v-else。</p>
</blockquote>
</li>
<li>
<p><strong>v-if</strong>：控制显示隐藏。如果dom不显示，整个dom没有不存在。</p>
</li>
<li>
<p><strong>v-bind</strong>：绑定属性。给一个dom元素添加属性。【比如：在做图片的渲染过程中，如果图片的src地址是动态的，那么就需要v-bind去绑定src属性，去给这个src赋值。】。凡是样式变化的可能用v-bind动态去操作class 【不要在原生的class里面去使用 <code>{{ Mustache }}</code> 改变class】</p>
</li>
<li>
<p><strong>v-for</strong>：循环。主要用于表格，<code>&lt;li&gt;</code> 标签去循环一个数组。【凡是看到列表就要v-for】</p>
</li>
<li>
<p><strong>v-on</strong>：事件绑定。【v-on：同等于@】，用于需要人机操作交互的地方</p>
</li>
<li>
<p><strong>v-cloak</strong>：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 <code>[v-cloak] { display: none }</code> 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。<br>
在使用 HTML 绑定 Vue实例时，在页面加载时会闪烁。为了效果更明显，我们可以延后加载 Vue 实例。</p>
<pre><code class="language-js">setTimeout(() =&gt; {
    new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        }
    })
},2000)
</code></pre>
<p>而 v-cloak 可以解决这一问题，在 css 中加上</p>
<pre><code class="language-js">[v-cloak] {
  display: none;
}
</code></pre>
<p>此时，页面会在实例编译完成后显示。</p>
</li>
<li>
<p><strong>v-pre</strong>：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。</p>
<pre><code class="language-html">&lt;span v-pre&gt;{{ this will not be compiled }}&lt;/span&gt;
</code></pre>
</li>
<li>
<p><strong>v-once</strong>：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。</p>
<pre><code class="language-html">&lt;div v-once&gt;
  &lt;h1&gt;comment&lt;/h1&gt;
  &lt;p&gt;{{msg}}&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</li>
</ol>
<h3 id="常见问题">常见问题</h3>
<ol>
<li>
<p>v-if与v-show区别？</p>
<p>v-if 是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.</p>
<p>v-if 也是惰性的,如果在初始渲染时条件为假，那么什么都不做，直到条件第一次为真的时候才会开始渲染条件块。</p>
<p>相比之下，v-show 就简单得多</p>
<p>不管初始条件是什么,元素总会被渲染,并且只是简单的基于 css 进行切换 display 属性.</p>
<p>一般来说,v-if 有更高的切换开销,而 v-show 有更高的出事渲染开销.因此,如果需要非常频繁的切换,那么使用 v-show 好一点;如果在</p>
<p>运行时条件不太可能改变,则使用 v-if 好点.</p>
<p>注意，v-show 不支持 <code>&lt;template&gt;</code> 元素，也不支持 v-else。</p>
</li>
<li>
<p>为什么我用的 v-cloak 无效？</p>
<p>在实际项目中，我们常通过 @import 来加载 css 文件</p>
<pre><code class="language-css">@import &quot;style.css&quot;

@import &quot;index.css&quot;
</code></pre>
<p>而 @import 是在页面 DOM 完全载入后才会进行加载，如果我们将 [v-cloak] 写在 @import 加载的 css 文件中，就会导致页面仍旧闪烁。</p>
<p>为了避免这种情况，我们可以将 [v-cloak] 写在 link 引入的 css 中，或者写一个内联 css 样式，这样就得到了解决。</p>
</li>
</ol>
<h2 id="其他问题">其他问题</h2>
<ol>
<li>
<p>什么是字符串模板？什么是HTML模板？</p>
<blockquote>
<p>你写在html中的 就是非字符串模板。你写在js中的 template:&quot;&quot;,这个就是字符串 模板</p>
</blockquote>
</li>
</ol>

            </div>
            
              <div class="tag-container">
                
                  <a href="https://tingke.gitee.io/post/tag/ObmlcY4qB/" class="tag">
                    VUE
                  </a>
                
              </div>
            
            
              <div class="next-post">
                <div class="next">下一篇</div>
                <a href="https://tingke.gitee.io/post/post/ios-da-bao-jing-tai-ku-sop/">
                  <h3 class="post-title">
                    iOS打包静态库SOP
                  </h3>
                </a>
              </div>
            

            

          </div>

        </div>
      </div>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

<script type="application/javascript">

AOS.init();

hljs.initHighlightingOnLoad()

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>




  </body>
</html>
